<template>
	<view class="main">
		<view class="welcome">
			忘记密码
		</view>

		<input class="input" placeholder="请输入手机号"  v-model="params.phone" maxlength="11"   type="number"/>

		<view class="row">
			<input class="left" placeholder="请输入6位验证码" v-model="params.captcha" maxlength="6" />

			<view class="right2" @click="getCapter" v-if="params.phone.length==11 && time==60">获取验证码</view>
			<view class="right" v-else-if="time<60">再次获取{{time }}S</view>
			<view class="right" v-else-if="time==60">获取验证码</view>
		</view>

		<input class="input" placeholder="请设置登录密码" password v-model="params.password"/>
		<input class="input" placeholder="请再次输入登录密码" password  v-model="params.password2"/>
		<view class="btn" @click="getData">确定</view>
		<view class="row-between">
			<view style="display: flex;">
				<view class="forget">已有账号？</view>
				<view class="registe" @click="goLogin">立即登录</view>
			</view>
		<view style="display: flex;margin-left: 30rpx;">
			<view class="forget">没有账号？</view>
			<view class="registe"  @click="goRegiste">注册账号</view>
		</view>
				
		</view>
		<view style="height: 60rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				      params: {
				        nickname: ''
				        , name: ''
				        , phone: ''
				        , captcha: ''
				        , password: ''
				        , category: 'mng_user_category_common'
				      }
				      , time: 60
			};
		}
		, methods: {
		    goLogin() {
				uni.navigateBack()
		    }
		    , goRegiste() {
				uni.navigateTo({
					url:'./registe'
				})
		    }
		    , async getCapter() {
		      if (this.params.phone.length < 11) {
		        this.$noIconTost('请输入正确的手机号')
		      }
			  
			  let res = await this.$req({
			  	url: `/mng/common/smsRetrievePassword/${this.params.phone}`,
			  	method:'post',
			  })
		      if (res.code == 200) {
		        this.$noIconTost('验证码已发送')
		        this.countDown()
		      }
		    }
		    , countDown() {
		      const aa = setInterval(() => {
		        this.time--
		        if (this.time == 0) {
		          clearInterval(aa)
		        }
		      }, 1000)
		    }
		
		    , async getData() {
		      if (this.params.phone.length != 11) {
		        this.$noIconTost('请输入正确手机号')
		        return
		      }
		      if (this.params.captcha.length != 6) {
		        this.$noIconTost('请输入正确验证码')
		        return
		      }
		      if (this.params.password.length < 6) {
		        this.$noIconTost('请输入不小于6位的密码')
		        return
		      }
		      if (this.params.password2 != this.params.password) {
		        this.$noIconTost('两次密码不一致')
		        return
		      }
			  
			  let res = await this.$req({
			  	url: `/mng/user/forget/forgetPasswordByPhone`,
			  	method:'post',
				data:this.params
			  })
			  
		      if (res.code == 200) {
		        this.$noIconTost('修改成功,请登录')
		        setTimeout(() => {
					uni.navigateBack()
		        }, 500)
		      }
		    }
		
		
		  }
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: white;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-repeat: no-repeat;
		align-items: center;
	}

	.logo {
		margin-top: 60rpx;
		width: 196rpx;
		height: 196rpx;
	}

	.title {
		margin-top: 32rpx;
		font-size: 48rpx;
		font-weight: 600;
		color: #2A2F3E;
		line-height: 64rpx;
	}

	.welcome {
		margin-top: 60rpx;
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2A2F3E;
		line-height: 56rpx;
	}

	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;
		width: calc(100% - 96rpx);
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.input {
		padding-left: 32rpx;
		margin-top: 40rpx;
		width: calc(100% - 96rpx);
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 2rpx solid #CDD5DF;

		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111F3A;
		line-height: 44rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		width: calc(100% - 48rpx);
		height: 96rpx;
		background: #004E96;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 48rpx;

	}

	.btn-text {}

	.row-between {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.registe {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #004E96;
		line-height: 44rpx;
	}

	.forget {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111F3A;
		line-height: 44rpx;

	}
	.row{
		display: flex;
		width: 100%;
		margin-left: 48rpx;
		height: 96rpx;
		align-items: center;
			margin-top: 40rpx;
	}
	.left {
	    width: 320rpx;
		padding-left: 32rpx;
	
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 2rpx solid #CDD5DF;
		
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111F3A;
		line-height: 44rpx;
	}
	.right {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-left: 16rpx;
	    width: 192rpx;
	    height: 96rpx;
	    background: #f6f7fb;
	    font-size: 28rpx;
	    font-weight: 400;
	    color: #111f3a;
	    line-height: 44rpx;
	}
	.right2 {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-left: 16rpx;
	width: 192rpx;
	height: 96rpx;
	    background: #004e96;
	    font-size: 28rpx;
	    font-weight: 400;
	    color: #fff;
	    line-height: 44rpx;
	}
</style>
